{% extends "data_edit.html" %}
{% load i18n %}
{% block form %}
    {% autoescape off %}
    <tr>
        <td><table><tbody><tr>
            {{form.Name|field_as_td_h}}
          <td>{{form.Name.errors }}</td>
            {{form.Units|field_as_td_h}}
          <td>{{form.Units.errors }}</td>
            {{form.Cycle|field_as_td_h}}
          <td>{{form.Cycle.errors }}</td>
        </tr></tbody></table></td>
    </tr>
    <tr class="displayN">{{form.weekend|field_as_td_h}}</tr>
    <tr><td>
        <table><tbody><tr>
            <td width="300">
                <div class="external-events" style="height: 400px;">
                    <div class="event-title">{% trans '时段' %}</div>
                    <div style="padding: 3px 0 3px 0;border-bottom: 1px solid #a4a9aa">
                        <input type="text" id="time-table-name">
                        <span class="action_Search">&nbsp;</span>
                        <a id="id_query_tb" href="javascript:void(0);" class="Link_blue1">{% trans '查询' %}</a>
                    </div>
                    <div>
                        <div class="external-event external-event-shift">
                            <table class="calendar_table"><tbody></tbody></table>
                        </div>
                    </div>
                </div>
            </td>
            <td width="20"></td>
            <td colspan="4">
                <div style="border: 1px solid #d5d8d2;height: 400px;">
                    <div style="width: 500px;height: 315px;margin-top: 5px; overflow: auto;">
                        <div style="border-bottom: 1px dotted #cccccc;height: 20px;"></div>
                        <table class="shift_management"><tbody><tr>
                        </tr></tbody></table>
                    </div>
                    <div id="id_condition" style="border-top: 1px dotted #cccccc;">
                         <div style="margin: 5px 0 5px 5px" id="day_off_div">
                             {{form.work_day_off|field_as_select2checkbox_no_td_first}}
                             {{form.day_off_type|field_as_dom}}
                         </div>
                         <div style="margin: 5px 0 5px 5px" id="weekend_div">
                             {{form.work_weekend|field_as_select2checkbox_no_td_first}}
                             {{form.work_type|field_as_dom}}
                         </div>
                        <div style="margin: 5px 0 5px 5px">
                             {{form.auto_shift|field_as_select2checkbox_no_td_first}}
                         </div>
                    </div>
                </div>
            </td>
        </tr></tbody></table>
    </td></tr>
    {% for i,k in form.errors.items %}
        {{i}}{{k}}
    {% endfor %}
    {% endautoescape %}
{% endblock %}

{% block addjs %}
    $(function(){
        funprocessNumRumEdit();
        $div=$("form#id_edit_form");
        if ($div.find("#id_Name").val()!="")//编辑状态
        {
            fillTimeTable();
        }
    });
    var weekend = $("#id_weekend").val();
    function before_submit()
    {
        var hastt=false
        $(".chk_date").each(function(){
            if($(this).attr("checked")){
                hastt=true;
                return false;
            }
        });
        if(!hastt){
            alert(gettext("选择日期"));
            return false;
        }
        return true

    }
    function fillTimeTable()
    {
        $div=$("form#id_edit_form");
        $.ajax({
            url: "/att/shift_detail/",
            data: {Shift_id:$div.find("input[name='pk']").val()},
            dataType:"json",
            type:"POST",
            success:function(data){
                var shift_details = data["N"];
                if(shift_details.length > 0){
                    funprocessNumRumEdit();
                    var shift_timetables = data["data"];
                    var tmp = {};
                    for(var j in shift_timetables){
                        var timetable = shift_timetables[j];
                        var day = parseInt(timetable['StartTime']);
                        if(!(day in tmp)){
                            tmp[day] = {
                                'ids': [],
                                'alias': []
                            }
                        }
                        tmp[day]['ids'].push(timetable['id']);
                        tmp[day]['alias'].push(timetable['SchName']);
                    }
                    for(var key in tmp){
                        $('.shift-container .shift-name .chk_date').each(function(){
                            if($(this).val() == key){
                                $(this).attr('checked', true);
                                var showing = $(this).parent().parent().find("input[class='timetable']");
                                if(showing.length == 0){
                                    alert("Please select timetable.")
                                }else{
                                    var display = tmp[key]['alias'].join(',');
                                    $(showing).val(display);
                                    $(showing).attr('title', display);
                                    var ids = tmp[key]['ids'].join(',');
                                    var result = '<input type="hidden" name="days" value="'+key+'-'+ids+'">';
                                    $(this).parent().find('.result').append(result);
                                }
                            }
                        });
                    }
                }
            }
        })

    }
    function funprocessNumRumEdit(){
		var fun_change_data=function(cycle,unit){
            var weekend = $("#id_weekend").val();
            var shift_management = $(".shift_management");
            var shift = "";
            if(unit==0){//日
                var content = ''
                for(var i=0;i<cycle;i++){
                    content += ''
                        +'<div class="shift-container"><input type="hidden" name="weekend_type" value="2">'
                        +' <div class="shift-name">'
                        +'  <div class="result"></div>'
                        +'  <input class="chk_date" value="'+i+'" timetables="" type="checkbox"/>'
                        +   gettext("第")+(i+1)+gettext("天")
                        +' </div>'
                        +' <div class="shift-timetable">'
                        +'  <input class="timetable" type="text" readonly="readonly">'
                        +' </div>'
                        +'  <div style="clear:both"></div> '
                        +'</div>'
                }
                shift = "<td>"+content+"</td>";
                $("#weekend_div").hide();
            }else if(unit==1){//周
                if (cycle>52)
                {
                    alert(gettext('周的周期不能大于52周'));
                    return ;
                }
                var dict_date = [
                    "{% trans '星期日' %}",
                    "{% trans '星期一' %}",
                    "{% trans '星期二' %}",
                    "{% trans '星期三' %}",
                    "{% trans '星期四' %}",
                    "{% trans '星期五' %}",
                    "{% trans '星期六' %}"
                ];
                for(var c=0; c<cycle; c++){
                    shift += "<td>"
                    var content = '';
                    for(var i=0;i<7;i++){
                        var display = '';
                        content += ''
                        +'<div class="shift-container">'
                        +' <div class="shift-name">'
                        +'    <div class="result"></div>'
                        if(weekend.indexOf(String((6+i)%7)) != -1){
                            content += ''
                                    +'<input class="" name="" value="'+(c*7+i)+'" type="checkbox" disabled/>'
                                    +gettext(dict_date[i])
                            display = "{% trans '周末' %}";
                        }else{
                            content += ''
                                    +'<input class="chk_date" value="'+(c*7+i)+'" timetables="" type="checkbox"/>'
                                    +gettext(dict_date[i])
                        }
                        content += ''
                        +' </div>'
                        +' <div class="shift-timetable">'
                        +'  <input class="timetable" type="text" value="'+display+'" readonly="readonly">'
                        +' </div>'
                        +' <div style="clear:both"></div> '
                        +'</div>'
                    }
                    shift += content+"</td>";
                }
                $("#weekend_div").show();
            }else if(unit==2){//月
                if (cycle>12)
                {
                    alert(gettext('月的周期不能大于12个月'));
                    return ;
                }
                var i=0;
                for(var j=1;j<=cycle;j++){
                    shift += "<td>"
                    var content = ''
                    for(; i< j*31; i++){
                        content += ''
                        +'<div class="shift-container"><input type="hidden" name="weekend_type" value="2">'
                        +' <div class="shift-name">'
                        +'  <div class="result"></div>'
                        +'  <input class="chk_date" value="'+i+'" timetables="" type="checkbox"/>'
                        +   gettext("第")+(i+1)+gettext("天")
                        +' </div>'
                        +' <div class="shift-timetable">'
                        +'  <input class="timetable" type="text" readonly="readonly">'
                        +' </div>'
                        +' <div style="clear:both"></div> '
                        +'</div>'
                    }
                    //select_date+="<td>"+tmp_cycle+"</td>";
                    shift += content+"</td>";
                }
                $("#weekend_div").hide();
            }
            $(shift_management).find('tbody tr').empty().append(shift);
            $(shift_management).find('.shift-container .shift-name .chk_date').click(function(){
                var checked = $(this).attr('checked');
                var showing = $(this).parent().parent().find("input[class='timetable']");
                var day = $(this).val();
                if(checked == 'checked' || checked == true){
                    var timetables = [];
                    var objs = []
                    $(".calendar_table tbody input[type='checkbox']:checked").each(function(){
                        var timetable = $(this).attr('timetable');
                        timetables.push(timetable);
                        objs.push($(this).val());
                    })
                    if(timetables.length == 0){
                        $(this).attr('checked', false)
                        alert("Please Select Timetable");
                    }else{
                        var display = timetables.join(',');
                        $(showing).val(display);
                        $(showing).attr('title', display);
                        if(objs.length > 0){
                            var ids = objs.join(',');
                            var result = '<input type="hidden" name="days" value="'+day+'-'+ids+'">';
                            $(this).parent().find('.result').append(result);
                        }
                    }
                }else{
                    $(showing).val('');
                    $(showing).attr('title', '');
                    $(this).parent().find('.result').empty();
                }
            });
        };
        var var_cycle=$(".tbl_data_edit #id_Cycle").val();//周期
        var var_unit=$(".tbl_data_edit #id_Units").val();//单位
        fun_change_data(var_cycle,var_unit);
        function fillout_timetable(param){
            var url = "../../../att/newgetSchClass/";
            if(param){
                url = url + param;
            }
            $.ajax({
                type:"POST",
                url:url,
                dataType:"json",
                success:function(sdata){
                    var html="";
                    for(var i in sdata){
                        var data = sdata[i];
                        var sch_name = data["SchName"];
                        if(data['DayOff'] == 1){
                            sch_name = '<span style="color: blue">'+data["SchName"]+'</span>';
                        }
                        if(data['DayOff'] == 2){
                            sch_name = '<span style="color: darkorange">'+data["SchName"]+'</span>';
                        }
                        html += ''
                        +'<tr>'
                        +'    <td>'
                        +'        <div>'
                        +'            <input type="checkbox" timetable="'+data["SchName"]+'" value="'+data["SchclassID"]+'">'
                        +'        </div>'
                        +'    </td>'
                        +'    <td>'
                        +'        <div name="timetable">'+sch_name+'</div>'
                        +'        <div>'+data["StartTime"]+'-'+data["EndTime"]+'</div>'
                        +'    </td>'
                        +'</tr>';
                    }
                    $(".calendar_table tbody").empty().append(html);
                },
                error:function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus+errorThrown);
                }
            });
        }
        $("#id_query_tb").click(function(){
            var val = $("#time-table-name").val();
            fillout_timetable('?name='+val);
        });
        $("#time-table-name").keydown(function(event){
            if(event.keyCode == 13){
                $("#id_query_tb").click();
            }
        });
        fillout_timetable();
        $(".tbl_data_edit").find("#id_Cycle").keyup(function(){
            var var_unit=$(".tbl_data_edit #id_Units").val();
            fun_change_data($(this).val(),var_unit);
        });
        $(".tbl_data_edit").find("#id_Units").change(function(){
            var var_cycle=$(".tbl_data_edit #id_Cycle").val();
            fun_change_data(var_cycle,$(this).val());
        });
	}
{% endblock %}